<script setup lang="ts">
import type { InterviewQuestionsForm } from '@/models/InterviewQuestions/InterviewQuestionsForm'
import type { FormInstance } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import type { useClassification } from './hooks/useClassification'
import { useSecondaryClassification } from './hooks/useSecondaryClassification'
import { watch } from 'vue'

export interface InterviewQuestionsFormProps {
  useClassificationInstance: ReturnType<typeof useClassification>
}

const props = withDefaults(defineProps<InterviewQuestionsFormProps>(), {})

const useSecondaryClassificationInstance = useSecondaryClassification(
  props.useClassificationInstance,
)

const formRef = ref<FormInstance>()
const formState = reactive<Partial<InterviewQuestionsForm>>({
  title: '',
  answer: '',
  classification: '',
  secondaryClassification: '',
})

async function getFormState(): Promise<Partial<InterviewQuestionsForm> | null> {
  try {
    await formRef.value?.validate()
  } catch (error) {
    return null
  }
  return { ...formState }
}

function resetFormStata() {
  formState.title = ''
  formState.answer = ''
  formState.classification = ''
  formState.secondaryClassification = ''
}

function setFormStata(formData: Partial<InterviewQuestionsForm>) {
  formState.title = formData.title
  formState.answer = formData.answer
  formState.classification = formData.classification
  formState.secondaryClassification = formData.secondaryClassification
}

defineExpose({
  getFormState,
  setFormStata,
  resetFormStata,
})

watch(
  () => formState.classification,
  () => {
    useSecondaryClassificationInstance
      .changeSecondaryClassificationList(formState.classification)
      .then(() => {
        if (
          useSecondaryClassificationInstance.secondaryClassificatList.value.some(
            (item) => item.code === formState.secondaryClassification,
          )
        ) {
          return
        }
        formState.secondaryClassification = ''
      })
  },
)
</script>
<template>
  <AForm
    ref="formRef"
    :model="formState"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 19 }"
    autocomplete="off"
  >
    <AFormItem label="一级分类" name="classification">
      <ASelect
        :loading="useClassificationInstance.loadingClassificationList.value"
        v-model:value="formState.classification"
        allow-clear
      >
        <template v-for="item of useClassificationInstance.classificationList.value" :key="item.id">
          <ASelectOption :value="item.code">{{ item.value }}</ASelectOption>
        </template>
      </ASelect>
    </AFormItem>
    <AFormItem label="二级分类" name="secondaryClassification">
      <ASelect
        :loading="useSecondaryClassificationInstance.loadingSecondaryClassificatList.value"
        v-model:value="formState.secondaryClassification"
        allow-clear
      >
        <template
          v-for="item of useSecondaryClassificationInstance.secondaryClassificatList.value"
          :key="item.id"
        >
          <ASelectOption :value="item.code">{{ item.value }}</ASelectOption>
        </template>
      </ASelect>
    </AFormItem>
    <AFormItem
      label="题目"
      name="title"
      :rules="[
        { required: true, trigger: 'blur' },
        { max: 2000, trigger: 'blur' },
      ]"
    >
      <ATextarea
        v-model:value="formState.title"
        :rows="3"
        :auto-size="{ minRows: 3, maxRows: 5 }"
        show-count
        :maxlength="2000"
      />
    </AFormItem>
    <AFormItem
      label="答案"
      name="answer"
      :rules="[
        { required: true, trigger: 'blur' },
        { max: 2000, trigger: 'blur' },
      ]"
    >
      <ATextarea
        v-model:value="formState.answer"
        :rows="5"
        :auto-size="{ minRows: 5, maxRows: 10 }"
        show-count
        :maxlength="2000"
      />
    </AFormItem>
  </AForm>
</template>
